<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}">
    <link rel="stylesheet" th:href="@{/css/index/header.css}">
    <!--    加载动画 css 文件-->
    <link rel="stylesheet" th:href="@{/css/pageLoading.css}">
    <link th:href="@{/css/prepare.css}" rel="stylesheet">
    <link th:href="@{/css/icon/bootstrap-icon.css}" rel="stylesheet">
    <link rel="stylesheet" href="/css/index.css">
    <style>
        body{
            /*文本不可选中*/
            -webkit-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
            user-select:none;
        }

        .goods-container{
            margin-top: 2rem;
            padding: 0;
        }

        .place-text-far{
            border: none;
            border-bottom: 1px solid rgb(162, 160, 160);
            margin: 0;
        }

        .place-text{
            font-size: 2rem;
            color: rgb(100, 150, 234);
        }

        .lists-far{
            padding: 0;
            margin-top: 10px;
        }

        .lists{
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
            gap: 2vh;
            margin: 0;
        }

        .list{
            /*display: inline-block;*/
            /*margin-top: 10px;*/
            background-color: white;
        }

        .goods{
            position: relative;
            display: flex;
            /*margin-left: .8rem;*/
            /*margin-top: .8rem;*/
            height: 25rem;
            width: 100%;
            /*flex-direction: column;*/
            align-items: center;
            justify-content: center;
        }

        .goods:hover{
            background-color: rgba(196,192,192,.2);
        }

        .goods > img{
            /*display: inline-block;*/
            margin-top: -10rem;
            width: 100%;
            height: 13rem;
        }

        .goods > p{
            position: absolute;
            width: 100%;
            /*left: 3rem;*/
            top: 15rem;
        }

        .goods > input{
            position: absolute;
            width: 8rem;
            height: 2rem;
            bottom: .2rem;
            border: none;
            background-color: rgb(117, 178, 239);
            cursor: pointer;
        }

        .goods-text{
            display: inline-block;
            padding-left: 2rem;
        }



    </style>
</head>
<body style="background-color: rgba(239,239,239,0.2);">
    <div class="index-container row">
        <div class="row">
            <div th:replace="index/header :: header"></div>
        </div>

        <div class="goods-container row">
            <div class="row place-text-far" style="width: 100%">
                <span class="place-text">热门商品</span>
            </div>

            <div class="lists-far" >
                <ul class="lists" >
                    <li class="list " th:each="child : ${indexGoodsList}">
                        <div class="goods">
                            <img src="/img/fighting.svg">
                            <p>
                                <span class="goods-text" th:text="'商品：' + ${child.getGoodName()}"></span><br/>
                                <span class="goods-text" th:text="'价格：' + ${child.getGoodPrice()} + '元'"></span><br/>
                                <span class="goods-text" th:text="'店铺：' + ${child.getGoodBusiness()}"></span>
                            </p>
                            <input class="goods-buy" type="button" th:onclick="buy([[${child.getGoodId()}]])" value="购买"/>
                        </div>
                    </li>
                </ul>
            </div>

        </div>

    </div>


<script src="/js/jQuery.js"></script>
<script th:inline="javascript">
    function buy(id) {
        let judge_login = [[${userFlag}]];
        if(judge_login == 0){
            alert("请先登录");
        }else {
            $.ajax({
                async: false,
                type: "post",
                url: "/index/buy",
                dataType: "json",
                data: {id: id},
                success: function (data){
                    console.log("请求成功！");
                    console.log("id：" + id);
                    alert("预购成功！");
                },
                error: function (data){
                    console.log("请求失败！");
                    console.log("id：" + id);
                }
            })
        }
    }

</script>
</body>
</html>